<!-- 带有编辑和删除功能的表格 -->
<template>
  <base-table :data="data" @rowClick="rowClick">
    <el-table-column v-if="selection" type="selection" width="55" />
    <slot></slot>
    <el-table-column label="操作" width="150" fixed="right">
      <template #default="scope">
        <div class="flex align-center">
          <el-button
            type="primary"
            size="mini"
            @click.stop="handle('edit', scope.row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            size="mini"
            @click.stop="handle('delete', scope.row)"
          >
            删除
          </el-button>
        </div>
      </template>
    </el-table-column>
  </base-table>
</template>

<script setup>
import BaseTable from "../BaseTable/index.vue"
import { defineEmits, defineProps } from "vue"

const props = defineProps({
    data: {
        type: Array,
        default: () => {
            return []
        },
    },
    selection: {
        type: Boolean,
        default: false,
    },
})
const emit = defineEmits(["handle", "rowClick"])
const handle = (type, row) => {
    emit("handle", type, row)
}
const rowClick = (row, index) => {
    emit("rowClick", row, index)
}
</script>

<style lang="scss" scoped></style>
>
